<template>
  <Scroll class="content">
    <el-tabs :tab-position="tabPosition" @tab-click="tabClick">
      <el-tab-pane :id="index" v-for="(item,index) in category" :label="item.title" class="item-left"></el-tab-pane>
    </el-tabs>
  </Scroll>
</template>

<script>
  import {getCategory} from "network/category";
  import Scroll from "components/common/scroll/Scroll";

  export default {
    name: "CategoryLeft",
    components:{
      Scroll
    },
    data(){
      return{
        tabPosition:'left',
        category:[],
        currentIndex:0,
      }
    },
    methods:{
      tabClick(tab,event){
        // 获取当前处于活跃的标签
        this.currentIndex=tab.index;
        this.$bus.$emit('cateClick',this.category[this.currentIndex])
        // console.log(this.$bus)
      }
    },
    created() {
      getCategory().then(res=>{
        this.category=res.data.category.list;
        this.$bus.$emit('cateClick',this.category[this.currentIndex])
      })
    }
  }
</script>

<style scoped>
  .content{
    background-color:#fff;
    height: 100%;
    overflow: hidden;
    width: 30%;
  }
</style>
